<template>
  <div class="m-skeleton" :class="clazz" :style="comStyle"></div>
</template>

<script lang="ts">
import { defineComponent ,computed } from "vue";

export default defineComponent({
  name: "MSkeleton",
  props: {

    type: {
      type: String,
      default: "line"
    },
    active: {
      type: Boolean,
      default: true
    },
    size: {
      type: Number,
      default: 16
    },
    width: {
      type: [Number, String],
      default: "100%"
    }

  },
  setup(props){
    const clazz = computed(() => {
      return [`m-skeleton__${props.type}`, props.active ? "is-active" : ""];
    });
    const comStyle = computed(() => {
      if (props.type === "line") {
        return {
          height: props.size + "px",
          width: typeof props.width === "number" ? props.width + "px" : props.width
        };
      } else if (props.type === "round") {
        return {
          height: props.size + "px",
          width: props.size + "px"
        };
      }
      return {};
    });

    return {
      clazz,
      comStyle
    }
  }
});
</script>

